<!DOCTYPE html>
<html>
  <head>
    <title>Component Blog Post Example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="blog-post-demo" class="demo">
      <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:title="post.title"
      ></blog-post>
    </div>

    <script>
      Vue.component("blog-post", {
        props: ["title"],
        template: "<h3>{{ title }}</h3>"
      });

      new Vue({
        el: "#blog-post-demo",
        data: {
          posts: []
        },
        created: function() {
          // Alias the component instance as `vm`, so that we
          // can access it inside the promise function
          var vm = this;
          // Fetch our array of posts from an API
          fetch("https://jsonplaceholder.typicode.com/posts")
            .then(function(response) {
              return response.json();
            })
            .then(function(data) {
              vm.posts = data;
            });
        }
      });
    </script>
  </body>
</html>
